<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>开心网</title>
		<link rel="stylesheet" type="text/css" href="css/开心网.css"/>
	</head>
	<body>
		<div class="box">
			<div class="hearder-box">
				<div class="header">
					<div class="logo fl">
						<a href="#"><img src="img/开心网Img/logo.png" ></a>
					</div>
					<div class="title fl">
						<ul class="clearfix">
							<li><a href="#">注册</a></li>
							<li><a href="#">登录</a></li>
							<li><a href="#">帮助</a></li>
							<li><a href="#">导航</a></li>
						</ul>
					</div>
					<div class="search fl">
						<input type="text" placeholder="搜人/公共网页/应用/内容" />
						<button type="button"><img src="img/开心网Img/search2.gif" ></button>
					</div>
				</div>
			</div>
			
			<div class="content">
				<div class="left-box fl">
					<div class="login">	<!-- 登录及注册 -->
						<div class="user-input">	<!-- 输入 -->
							<input type="text" placeholder="邮箱/手机号/其他用户名"/>
							<input type="password" placeholder="请输入密码"/>
						</div>
						<div class="user-forget">	<!-- 忘记密码 -->
							<input type="checkbox" />下次自动登录
							<a href="#">忘记密码？</a>
						</div>
						<div class="user">
							<div class="user-login">	<!-- 登录及注册框 -->
								<a href="#">登陆</a>
							</div>
							<img src="img/开心网Img/1_03.jpg" >
							<div class="user-login">	<!-- 登录及注册框 -->
								<a href="#">注册新账号</a>
							</div>
						</div>
						<div class="expect">
							<p>使用其他账号登录</p>
							<a href="#"><img src="img/开心网Img/qq.gif" ></a>
							<a href="#"><img src="img/开心网Img/wb.gif" ></a>
							<a href="#"><img src="img/开心网Img/ll.gif" ></a>
						</div>	
					</div>
					<div class="client">	<!-- 客户端 -->
						<div class="client-img">
							<p>开心网客户端</p>
							<img src="img/开心网Img/phone.jpg" >
						</div>
						<div class="download">
							<div class="down">
								<div class="image-box iphone fl"></div>
								<div class="phone-down fl">
									<a href="#">iphone/ipad版下载</a>
								</div>
							</div>
							<div class="down">
								<div class="image-box android fl"></div>
								<div class="phone-down fl">
									<a href="#">Android版下载</a>
								</div>
							</div>
							<a href="#">更多版本&gt;&gt;</a>
						</div>
					</div>
				</div>
				
				<div class="right-box fl">	<!-- 右边盒子 -->
					<div class="info fl">
						<div class="info-box">
							<h4>还没有开心账号？赶紧注册吧！</h4>
							<div class="mail">
								<span>电子邮箱：</span>
								<input type="text" />
							</div>
							<p>如果没有邮箱，你可以用<a href="#">账号注册</a></p>
							<div class="mail">
								<span>创建密码：</span>
								<input type="text" />
							</div>
							<div class="mail">
								<span>姓名：</span>
								<input type="text" />
							</div>
							<div class="sex">
								<span class="xing">性别：</span>
								<input type="radio" name="sex"/><span class="nan">男</span>
								<input type="radio" name="sex"/><span class="nv">女</span>
							</div>
							<div class="birth">
								<span>生日：</span>
								<select name="">
									<option value="" >请选择</option>
									<option value="" >2000</option>
									<option value="" >2001</option>
								</select>
								<span class="op">年</span>
								<select name="">
									<option value="" >--</option>
									<option value="" >1</option><option value="" >3</option><option value="" >4</option>
									<option value="" >5</option>
								</select>
								<span class="op">月</span>
								<select name="">
									<option value="" >--</option>
									<option value="" >1</option><option value="" >3</option><option value="" >4</option>
									<option value="" >5</option>
								</select>
								<span class="op">日</span>
							</div>
							<div class="sex">
								<span class="xing">我现在：</span><input type="radio" name="sex"/><span class="now">在工作</span>
								<input type="radio" name="sex"/><span class="now">在上学</span>
								<input type="radio" name="sex"/><span class="now">其他</span>
							</div>
							<div class="mail">
								<span>居住地：</span>
								<input type="text" placeholder="北京"/>
							</div>
							<div class="agree">
								<input type="checkbox"/>同意<a href="#">开心网服务条款</a>
							</div>
							<div class="user-login">
								<a href="#">立即注册</a>
							</div>
						</div>
					</div>
					<div class="wait fl">	<!-- 右边 -->
						<div class="people"></div>
					</div>
				</div>
				
				<div class="bottom-box fl">	<!-- 下面盒子 -->
					<div class="bot-top fl">
						<ul class="fl">
							<li><a href="#">关于我们</a></li>
							<li><a href="#">手机中心</a></li>
							<li><a href="#">开放平台</a></li>
							<li><a href="#">应用中心</a></li>
							<li><a href="#">自助广告</a></li>
							<li><a href="#">开心招聘</a></li>
							<li><a href="#">信息专栏</a></li>
							<li><a href="#">客服</a></li>
							<li><a href="#">帮助</a></li>
						</ul>
						<span>&copy;2016开心网</span>
					</div>
					<div class="bot-bot fl">
						<p class="fir">北京心人信息技术有限公司:京网文[2012]0830-273号<span>·</span><a href="#">京ICP证O80482号</a><span>·</span><a href="#">京文网安备1101080201444号</a><span>·</span>(京)-非经营性-2009-0009<span>·</span>未成年家长维护</p>
						<p class="sec">违法和不良信息举报电话：010-57978400举报邮箱：<a href="#">jubao@corp.kaixin001.com</a><img src="img/开心网Img/11.png" >
						<a href="#">北京互联网举报中心www.bjubao.org &nbsp;&nbsp;北京地区网站联合辟谣平台&nbsp;&nbsp;中国互联网举报中心</a></p>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
